<template>
    <div class="app-container">
      <el-row :gutter="20">
        <!-- 类型数据 -->
        <el-col :span="4" :xs="24">
          <div class="head-container">
            <el-input
              v-model="categoryName"
              placeholder="请输入类型名称"
              clearable
              prefix-icon="Search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
              ref="categoryTreeRef"
              :data="categoryTree"
              :props="{ label: 'categoryName', children: 'children' }"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              node-key="categoryId"
              highlight-current
              default-expand-all
              @nodeClick="handleNodeClick"
            />
          </div>
        </el-col>

            <!-- 数据 -->
            <el-col :span="20" :xs="24">
                <el-form v-show="state.showSearch" ref="queryRef" :model="state.queryParams" :inline="true"
                    label-width="68px">
                    <el-form-item label="商品名称" label-width="85px" prop="productName">
                        <el-input v-model="state.queryParams.productName" placeholder="请输入商品名称" clearable style="width: 240px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                        <!-- <el-button icon="Refresh" @click="resetQuery(proxy)">重置</el-button> -->
                        <el-button icon="Refresh" @click="resetTree">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8" #default="scope">
                    <el-col :span="1.5" >
                        <el-button type="primary" plain icon="Plus"
                            @click="addOrUpdateHandle(undefined)">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button  type="success" plain icon="Edit"
                            :disabled="state.single"
                            @click="addOrUpdateHandle(1)">编辑</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button  type="danger" plain icon="Delete"
                            :disabled="state.multiple" @click="deleteBatchHandle">删除</el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="state.showSearch" :columns="columns"
                        @queryTable="getDataList"></right-toolbar>
                </el-row>

                <el-table v-loading="state.loading" :data="state.rows" @selectionChange="selectionChangeHandle">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column v-if="columns[0].visible" key="productId" label="商品编号" align="center" prop="productId" />
                    <el-table-column v-if="columns[1].visible" key="productName" label="商品名" align="center" width="180" prop="productName">
                    </el-table-column>
                    <el-table-column v-if="columns[2].visible" key="categoryId" label="类型id" align="center" prop="categoryId"
                        :show-overflow-tooltip="true" />
                    <el-table-column v-if="columns[3].visible" key="detail" label="商品描述" align="center" prop="detail"
                        :show-overflow-tooltip="true" />
                    <el-table-column v-if="columns[4].visible" key="isDiscount" label="是否售卖" align="center" prop="isDiscount"
                        :show-overflow-tooltip="true" />
                    <el-table-column v-if="columns[5].visible" key="productPrice" label="商品价格" align="center" prop="productPrice"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="图片" align="center" >
                        <template #default="scope">
                           <img v-if="scope.row.imageUrl" :src="scope.row.imageUrl" width="100" align="center"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-tooltip content="修改" placement="top">
                                <el-button  link type="primary" icon="Edit"
                                    @click="addOrUpdateHandle(scope.row.productId)"></el-button>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <el-button  link type="danger" icon="Delete"
                                    @click="deleteHandle(scope.row.productId)"></el-button>
                            </el-tooltip>
                            <el-tooltip content="展开" placement="top">
                                <el-button  link type="success" icon="Switch"
                                    @click="addOrUpdateHandle(scope.row.productId)"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>

                </el-table>
                <pagination v-show="state.total > 0" v-model:page="state.pageNum" v-model:limit="state.pageSize"
                    :total="state.total" @pagination="query" />
            </el-col>
        </el-row>
        <!-- 引用新增或修改的界面 -->
        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>

    </div>
</template>

<script setup name="Product" lang="ts">
import { ElTree } from 'element-plus';
import { IHooksOptions } from '@/hooks/hooksinterface';
import { useCrud } from '@/hooks/hooksservice';
import { ref, reactive, getCurrentInstance, ComponentInternalInstance, watch } from 'vue';
import { deleteProduct, getTree, listProducts } from '@/api/app/store/products';
//引用新增修改组件页
import AddOrUpdate from './add-and-edit.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const categoryTree = ref([]);
const categoryTreeRef = ref<InstanceType<typeof ElTree>>();

const categoryName = ref('');

const state : IHooksOptions = reactive({
    queryApi: listProducts,
    deleteApi: deleteProduct,
    primaryKey: 'productId',
    pageNum: 1,
    pageSize: 10,
    queryParams: {
        categoryId: undefined,
        productName: '',
    }
});

const { getDataList, selectionChangeHandle, resetQuery, query, deleteBatchHandle, deleteHandle } = useCrud(state);

// 列显隐信息
const columns = ref([
    { key: 0, label: `商品编号`, visible: true },
    { key: 1, label: `商品名`, visible: true },
    { key: 2, label: `类型id`, visible: true },
    { key: 3, label: `商品描述`, visible: true },
    { key: 4, label: `是否售卖`, visible: true },
    { key: 5, label: `商品价格`, visible: false }
]);

/** 获取类型树 */
function getCategoryTree() {
    getTree().then((res: { data: any; }) => {
        categoryTree.value = res.data;
        // console.log(categoryTree.value);
    });
}

/** 节点单击事件 */
function handleNodeClick(data : any) {
    state.queryParams.categoryId = data.categoryId;
    getDataList();
}

/** 通过条件过滤节点  */
const filterNode = (value : any, data : any) => {
    if (!value) return true;
    return data.categoryName.indexOf(value) !== -1;
};
    /** 根据名称筛选类型树 */
watch(categoryName, val => {
    (proxy?.$refs['categoryTreeRef'] as any).filter(val);
});

// 调用新增或修改页面的方法
const addOrUpdateRef = ref();

//新增或修改的时候传递id
const addOrUpdateHandle = (productId ?: number| undefined) => {
    //调用它里面的init方法
    addOrUpdateRef.value.init(productId);
};

const resetTree = () => {
    state.queryParams.categoryId = undefined;
    categoryTreeRef.value?.setCurrentKey(null as any);
    resetQuery(proxy);

};


getCategoryTree();
</script>
